<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="loginForm" :model="loginForm" :rules="rules" ref="loginFormRef">
          <h1>Hello</h1>
          <h2>欢迎来到硅谷甄选</h2>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" :prefix-icon="Lock" :show-password="true" type="password"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item class="code">
            <el-col :span="16">
              <el-form-item prop="code">
                <el-input v-model="loginForm.code" :prefix-icon="User" placeholder="请输入验证码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="display: flex;justify-content: center" @click="handleCaptchaImage">
              <img :src="'data:image/png;base64,'+captchaImage" alt="">
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loginLoading" class="login" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ElCol, ElRow, ElForm, ElFormItem, ElInput, ElButton, ElNotification} from "element-plus"
import {User, Lock} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import {userLogin} from '@/api/login/login'
import {useRouter} from "vue-router"
import {getCaptchaImage} from "@/api/common/common.js"
import {setToken}  from "@/utils/token.js"

function handleCaptchaImage() {
  getCaptchaImage().then(resp => {
    captchaImage.value = resp.img;
    loginForm.uuid = resp.uuid;
  })
}

let captchaImage = ref("");
onMounted(() => {
  handleCaptchaImage()
})

//获取路由器实例
const $router = useRouter()

const passwordValidate = (rule, value, callback) => {

  const regex = /^[a-zA-Z].{5,9}$/;
  if (!regex.test(value)) {
    callback(new Error('密码必须以字母开头，且长度在6-10位'));
    return
  }

  callback();
}

const loginForm = reactive({
  username: "",
  password: "",
  code: "",
  uuid: ""
})
let loginLoading = ref(false)
const rules = reactive({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {required: true, min: 5, max: 10, message: '6-10', trigger: 'change'},
  ],
  password: [
    {validator: passwordValidate, trigger: 'change'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
})

const loginFormRef = ref()
const login = async () => {

  //发起登录之前，先校验一下
  await loginFormRef.value.validate()

  loginLoading.value = true

  userLogin(loginForm)
      .then(resp => {
        if (resp.code === 200) {
          ElNotification({
            title: '登录成功',
            message: '欢迎进入本系统',
            type: 'success',
          })
          setToken(resp.token)
          //登录成功，跳转到首页
          $router.push("/")
        }
      })
      .finally(() => loginLoading.value = false)
}

</script>

<style lang="scss" scoped>
.login_container {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg");
  background-size: cover;

  .loginForm {
    width: 80%;
    top: 30vh;
    position: relative;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    padding: 30px;

    .login {
      width: 100%;
    }

    .code {
      display: flex;
      flex-direction: row;

      img {
        height: 40px;

      }
    }
  }

  h1, h2 {
    color: white;
    margin-bottom: 20px;
  }
}

</style>